<template>
    <div class="main">
      <nav>
        <router-link to="/main/home/1?name=hyx">首页</router-link>
        <router-link to="/main/movie">电影</router-link>
        <router-link to="/main/about">关于</router-link> x
      </nav>

      <button @click="goTo('/main/movie')">电影</button>

      <a href="">关于</a>
       
      <section>
         <RouterView></RouterView>
      </section>
    </div>
  </template>
  
  <script lang="ts" setup> 
  import { ref, KeepAlive, onMounted } from "vue";
  
  //使用路由器的方式
  import { useRouter,useRoute } from "vue-router";

  const router = useRouter()

  const route = useRoute()

  function goTo(path) {
    router.replace(path)
  }

  onMounted(()=>{
    console.log(route)
    //debugger
  })
  
  // let coms = {
  //   Home,
  //   Movie,
  //   About,
  // };
  
  // let comName = ref("Home");
  //当页面挂载成功时的钩子
  // onMounted(() => {
  //   //当hash值变化时的事件
  //   window.addEventListener(
  //     "hashchange",
  //     (event) => {
  //       //#/Home,获取路径名称
  //       let comKey = location.hash.substring(2);
  //       //更换当前组件名称
  //       comName.value = comKey;
  //     },
  //     false
  //   );
  // });
  </script>
  
  <style>
  .main a {
    color: #00f;
    text-decoration: none;
    font-size: 16px;
  }
  .main a:hover {
    color: orangered;
  }
  .main nav {
    border-bottom: 2px solid #999;
    height: 46px;
    line-height: 46px;
  }
  </style>